<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/@visactor/vtable/dist/vtable.min.js"></script>
  <style>

  </style>
</head>

<body>

  <div id="tableContainer" style="width: 1200px;height:400px;"></div>

  <script>
    window.onload = function () {

      fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/North_American_Superstore_Pivot_data.json')
        .then((res) => res.json())
        .then((data) => {

          const option = {
            records: data,
            "rows": [
              {
                "dimensionKey": "City",
                "title": "City",
                "headerStyle": {
                  "textStick": true
                },
                "width": "auto",
              },
            ],
            "columns": [
              {
                "dimensionKey": "Category",
                "title": "Category",
                "headerStyle": {
                  "textStick": true
                },
                "width": "auto",
              },
            ],
            "indicators": [
              {
                "indicatorKey": "Quantity",
                "title": "Quantity",
                "width": "auto",
                "showSort": false,
                "headerStyle": {
                  fontWeight: "normal",
                },
                style: {
                  padding: [16, 28, 16, 28],
                  color(args) {
                    if (args.dataValue >= 0)
                      return 'black';
                    return 'red'
                  }
                }
              },
              {
                "indicatorKey": "Sales",
                "title": "Sales",
                "width": "auto",
                "showSort": false,
                "headerStyle": {
                  fontWeight: "normal",
                },
                "format": (rec) => { return '$' + Number(rec).toFixed(2) },
                style: {
                  padding: [16, 28, 16, 28],
                  color(args) {
                    if (args.dataValue >= 0)
                      return 'black';
                    return 'red'
                  }
                }
              },
              {
                "indicatorKey": "Profit",
                "title": "Profit",
                "width": "auto",
                "showSort": false,
                "headerStyle": {
                  fontWeight: "normal",
                },
                "format": (rec) => { return '$' + Number(rec).toFixed(2) },
                style: {
                  padding: [16, 28, 16, 28],
                  color(args) {
                    if (args.dataValue >= 0)
                      return 'black';
                    return 'red'
                  }
                }
              }
            ],
            "corner": {
              "titleOnDimension": "row",
              "headerStyle": {
                "textStick": true
              }
            },
            dataConfig: {
              sortRules: [
                {
                  sortField: 'Category',
                  sortBy: ['Office Supplies', 'Technology', 'Furniture']
                }
              ]
            },
            enableDataAnalysis: true,
            widthMode: 'standard'
          };

          // 创建 VTable 实例
          const tableInstance = new VTable.PivotTable(document.getElementById('tableContainer'), option);
        })
    }
  </script>
</body>

</html>